<template>
	<div class="liveInformation">
		<div class="liveInformationCont">
			<div class="liveInformationItems">
				<div class="liveInformationItems_left">
					分享开关
				</div>
				<div class="liveInformationItems_right">
					<div class="useLable">
						<u-switch v-model="from.setting[0].status" @change="changeSwitch" activeColor="#295EFF">
						</u-switch>
					</div>
				</div>
			</div>
			<div class="liveInformationItems">
				<div class="liveInformationItems_left">
					<span>*</span>分享标题
				</div>
				<div class="liveInformationItems_right">
					<input type="text" value="" placeholder="请输入" v-model="from.setting[0].content.title" maxlength="25"
						placeholder-class="zj-placeholder-class" />
				</div>
			</div>
			<div class="liveInformationItems noBorder">
				<div class="liveInformationItems_left">
					<span>*</span>分享描述
				</div>

			</div>
			<div class="liveInformationText">
				<u--textarea v-model="from.setting[0].content.desc" height='110' maxlength='32' count
					placeholder="请输入内容"></u--textarea>
			</div>
			<!-- 分享 -->
			<div class="liveInformationIcon">
				<div class="liveInformationIconTitle">
					H5图标
				</div>
				<div class="liveInformationIconImage" @click="showAvatarPop(1)">
					<div class="liveInformationIconImage_cont">
						<image :src="from.setting[0].content.icon" mode=""></image>
					</div>
					<div class="liveInformationIconImage_text">
						推荐图片尺寸为：512*512px，JPG、JPEG、PNG格 式，大小不超过5M
					</div>
				</div>
			</div>
			<div class="liveInformationIcon">
				<div class="liveInformationIconTitle">
					小程序图标
				</div>
				<div class="liveInformationIconImage" @click="showAvatarPop(2)">
					<div class="liveInformationIconImage_cont mpImg">
						<image :src="from.setting[0].content.mpicon" mode=""></image>

					</div>
					<div class="liveInformationIconImage_text">
						推荐图片尺寸比例：5:4，JPG、JPEG、PNG格式，
						大小不超过5M
					</div>
				</div>
			</div>
			<!-- 上传 -->
			<u-popup :show="isShowAvatarPop" round="10" @close="closeAvatarPop" mode="bottom">
				<view class="pop-container">
					<view class="avatar-pop-box">
						<view class="pop-item" @click="choosePic(1)">
							拍照
						</view>
						<view class="pop-item" @click="choosePic(2)">
							从手机相册选择
						</view>
					</view>
					<view class="pop-cancel-item" @click="closeAvatarPop">
						取消
					</view>
				</view>
			</u-popup>
			<div class="liveInformationBtn" @click='saveLiveEvent'>
				<div class="liveInformationBtnCont">
					保存
				</div>
			</div>

		</div>
	</div>
</template>

<script>
import {
	txCosUpload
} from '@/utils/txCosUpload'
export default {
	props: {
		setInfo: [Object, String],
		liveId: [Number, String],
		liveInfo: [Object, String],
	},
	data() {
		return {
			switchValue: "",
			value5: '',
			isShowNamePop: false,
			isShowAvatarPop: false,
			isIcon: 1,
			from: {
				liveId: '',
				setting: [{
					content: {
						title: '',
						desc: "",
						icon: '',
						mpicon: '',
						showShareBtn: ''
					},
					status: false,
					type: "wxShare"
				},]
			}
		}
	},
	watch: {
		setInfo(newVal, oldVal) {
			this.changeData(newVal)
		}
	},
	mounted() {
		this.from.liveId = this.liveId
		this.changeData(this.setInfo)
	},
	methods: {
		changeData(d) {
			const v = JSON.parse(JSON.stringify(d))
			if (!v.setting) return
			v.setting.forEach((ite) => {
				ite.status = ite.status == 1 ? true : false
			})
			for (var i in this.from.setting) {
				for (var k in v.setting) {
					if (this.from.setting[i].type == v.setting[k].type) {
						this.$set(this.from.setting, i, v.setting[k])
						// this.from.setting[i] = JSON.parse(JSON.stringify(v.setting[k]))
						// this.from.setting[i].status = v.setting[k].status
						if (this.from.setting[i].content != '') {
							this.from.setting[i].content = JSON.parse(this.from.setting[i].content)
							// 设置默认分享setInfo
							this.from.setting[i].content.title = this.from.setting[i].content.title == '' ? this.liveInfo.name : this.from.liveInfo[i].content.title
							this.from.setting[i].content.desc = this.from.setting[i].content.desc == '' ? this.liveInfo.rootOrgInfo.name + '正在进行直播' : this.from.liveInfo[i].content.title
						}
						console.log('111', this.from)
					}
				}
			}

		},
		changeSwitch(e) { },
		showAvatarPop(type) {
			this.isIcon = type // 1为h5 2为小程序
			console.log('showAvatarPop')
			this.isShowAvatarPop = true
		},
		closeAvatarPop() {
			this.isShowAvatarPop = false
		},
		showPhonePop() {
			console.log('showPhonePop')
			this.$refs.bindPhonePopRef.formData.oldPhone = this.formData.phoneNum
			this.isShowPhonePop = true
		},
		closePhonePop() {
			this.isShowPhonePop = false
		},
		showNamePop() {
			console.log('showNamePop')
			this.isShowNamePop = true
		},
		closeNamePop() {
			console.log('closeNamePop')
			this.isShowNamePop = false
		},
		confirmNamePop(params) {
			this.formData.name = params
			this.isShowNamePop = false
		},

		confirmName() {
			console.log('confirmName')
			this.isShowNamePop = false
		},
		// 上传图片
		choosePic(type) {
			const vm = this
			if (type == 1) {
				this.$utils.androidCamera(this)
			} else {
				this.$utils.androidAlbum(this)
			}
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: async (res1) => {
					const file = res1.tempFiles[0];
					const params = {
						scene: 'wechat'
					}
					txCosUpload(file, params, (progressData) => {
						// 实现进度条，目前没用到
						console.log(123, Math.round(progressData.percent * 100))
					},).then(res => {
						uni.showToast({
							title: '图片上传成功',
							icon: 'none',
							duration: 1500
						})
						if (this.isIcon == 1) {
							vm.from.setting[0].content.icon = res.fileUrl
						} else {
							vm.from.setting[0].content.mpicon = res.fileUrl
						}
						vm.isShowAvatarPop = false
					})
				}
			});
		},
		// 保存直播
		async saveLiveEvent() {
			const params = JSON.parse(JSON.stringify(this.from))
			params.setting.forEach((ite) => {
				ite.content = JSON.stringify(ite.content)
				ite.status = ite.status ? 1 : 2
			})
			const {
				data
			} = await this.$request(this.$Api.liveUpdateSetting, params, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '保存成功',
				icon: 'none',
				duration: 1500
			})
		}
	}
}
</script>

<style lang="scss">
.liveInformation {
	width: 100%;
	// min-height: 60rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding-bottom: 32rpx;
	// height: calc(100vh - 390rpx) !important;
	overflow-y: scroll;
	padding-bottom: 100rpx;

	.pop-container {
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		background-color: #F2F2F2;

		.pop-item {
			padding: 32rpx 0;
			background-color: #FFFFFF;
			margin-bottom: 2rpx;
		}

		.pop-cancel-item {
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-top: 16rpx;
		}
	}


	.liveInformationCont {
		padding: 0 32rpx;
		box-sizing: border-box;
		width: 100%;

		.liveInformationItems {
			width: 100%;
			height: 104rpx;
			border-bottom: 1rpx solid #E3E8EE;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #464C5B;

			.liveInformationItems_left {
				min-width: 150rpx;

				span {
					color: #FF5A5F;
				}
			}

			.liveInformationItems_right {
				text-align: right;
			}

		}

		.liveInformationText {
			width: 622rpx;
			min-height: 242rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #E3E8EE;

		}

		.liveInformationIcon {
			display: flex;
			align-items: flex-start;
			margin-top: 24rpx;
			height: 325rpx;

			.liveInformationIconTitle {
				font-size: 28rpx;
				color: #464C5B;
				min-width: 160rpx;

			}

			.liveInformationIconImage {
				width: 224rpx;
				height: 226rpx;
				// margin-left: 20rpx;

				image {
					width: 224rpx;
					height: 226rpx;
					background: #f5f5f5;
				}
			}

			.mpImg {
				image {
					width: 248rpx;
					height: 248rpx;
					background: #f5f5f5;
				}
			}

			.liveInformationIconImage_text {
				font-size: 20rpx;
				color: #0D0D0D;
				width: 460rpx;
				opacity: 0.5;
				margin-top: 8rpx;
			}
		}

		.liveInformationItemsLive {
			height: 40rpx;
			margin-top: 32rpx;
		}

		.liveInformationSP {
			width: 621rpx;
			height: 352rpx;
			border-radius: 16rpx;
			margin: 30rpx auto;

			image {
				width: 621rpx;
				height: 352rpx;
				border-radius: 16rpx;
				background: #f5f5f5;
			}
		}

		.liveInformationSPText {
			font-size: 28rpx;
			color: #C8C9CC;
		}

		.liveInformationBtn {
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;

			.liveInformationBtnCont {
				width: 640rpx;
				height: 80rpx;
				background: #295FFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;

			}
		}
	}
}
</style>
